<template>
  <div class="container" >
    <ChatAside v-if="isVisible"></ChatAside>
    <ChatMain v-if="isMainVisible"></ChatMain>
  </div>
</template>

<script>
import ChatAside from '@/components/ChatAside.vue';
import ChatMain from '@/components/ChatMain.vue';
export default {
    components: {
        ChatAside,
        ChatMain,
    },
  data() {
    return {
        isVisible: false,
        isMainVisible:false,
    };
  },
  mounted() {
    this.showComponent();
    this.showMainComponent();
  },
  methods: {
    showComponent() {
        this.isVisible = true;
    },
    showMainComponent() {
        this.isMainVisible = true;
    }
  }
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /* background-color:; */
}
</style>